<template>
    <el-dialog
    title="编辑商品"
    :visible.sync="dialogEditorVisible"
    width="70%"
    :before-close="handleClose">
    <el-form 
    label-width='70px'
    :label-positon="labelPositon"
    :model="editorForm"
    ref="ruleForm"
    >
      <el-form-item label="商品类目">
        <span class="category">{{treeData.name}}</span>
        <el-button class="category" type="primary" @click="dialogCategoryVisible=true">类目选择</el-button>
        <el-dialog
          width="50%"
          title="类目选择"
          :visible.sync="dialogCategoryVisible"
          append-to-body>
          <ProductTree @onTree="getTreeData" />
           <span slot="footer" class="dialog-footer">
            <el-button @click="dialogCategoryVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogCategoryVisible = false">确 定</el-button>
           </span>
        </el-dialog>
      </el-form-item>
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="editorForm.name"></el-input>
      </el-form-item>
      <el-form-item label="商品卖点" prop="sellPoint">
        <el-input v-model="editorForm.sellPoint"></el-input>
      </el-form-item>
      <el-form-item label="商品价格" prop="price">
        <el-input v-model="editorForm.price"></el-input>
      </el-form-item>
      <el-form-item label="商品数量" prop="num">
        <el-input v-model="editorForm.num"></el-input>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-button class="category" type="primary" @click="dialogUploadVisible=true">上传图片</el-button>
        <img class="upload-img" :src="uploadData.url" alt="" />
        <el-dialog
          title="上传图片"
          :visible.sync="dialogUploadVisible"
          width="50%"
          append-to-body
          :before-close="handleClose">
            <ProductUpload @onUpload="getUpload" />
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogUploadVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogUploadVisible = false">确 定</el-button>
          </span>
        </el-dialog>
      </el-form-item>
      <el-form-item label="商品描述">
        <!-- <BaiduUEditor /> -->
        <WangEditor @onEditor="getEditor" :currentEditorData="currentEditorData"/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogEditorVisible = false">取 消</el-button>
      <el-button type="primary" @click="editorProductHandle">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import BaiduUEditor from './BaiduUEditor'
import WangEditor from './WangEditor'
import ProductTree from './ProductTree'
import ProductUpload from './ProductUpload'
import api from '../../api'
export default {
  data(){
    return {
      dialogEditorVisible:false,//添加对话框
      dialogCategoryVisible:false,//类目选择
      dialogUploadVisible:false,//上传图片
      labelPositon:"left",
      editorForm:{
        name:'',
        sellPoint:'',
        price:'',
        num:''
      },
      treeData:{
        name:''
      },//tree对象
      uploadData:{},//upload对象
      editorData:'',//editor对象
      currentData:{},//预更新
      currentEditorData:'',//回传editor对象
    }
  },
  components:{
    BaiduUEditor,
    WangEditor,
    ProductTree,
    ProductUpload
  },
  mounted(){
    this.$bus.$on('onEditorDialog',data=>{
      this.dialogEditorVisible=true;
      this.currentData=data
      api.preUpdateItem({
      id:this.currentData.id
        }).then(res=>{
          if(res.data.status===200){
            this.treeData.name=res.data.result[0].cid;
            this.editorForm={
              name:res.data.result[0].title,
              sellPoint:res.data.result[0].sellPoint,
              price:res.data.result[0].price,
              num:res.data.result[0].num
            };
            this.$set(this.uploadData,'url',res.data.result[0].image);
            this.currentEditorData=res.data.result[0].descs
          }
        }).catch(err=>{
          console.log(err);
        })
    })
    
  },
  methods:{
    handleClose(done){
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    /* 获取tree的数据 */
    getTreeData(data){
      this.treeData=data
    },
    /* 获取图片 */
    getUpload(data){
      if(data.url){
        data.url=data.url.replace("upload",'http://localhost:3005')
      }
      this.uploadData=data
    },
    /* 获取富文本数据 */
    getEditor(data){
      this.editorData=data
    },
    /* 修改产品 */
    editorProductHandle(){
      api.updateTbItem({
        id:this.currentData.id,
        cid:this.treeData.cid,
        title:this.editorForm.name,
        sellPoint:this.editorForm.sellPoint,
        price:this.editorForm.price,
        num:this.editorForm.num,
        desc:this.editorData,
        image:this.uploadData.url
      }).then(res=>{
        if(res.data.status===200){
          this.dialogEditorVisible=false;
          this.$bus.$emit('onRefresh',true)
        }
      }).catch(err=>{
        console.log(err);
      })
    }
  }
}
</script>

<style scoped lang="less">
.category{
  float: left;
  margin-right: 20px;
}
.upload-img{
  width: 100px;
  float: left;
}
</style>